<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态菜单示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">

        <template v-for="item in menuData">
            <el-submenu v-if="item.children.length > 0" :key="item.meuId" :index="item.meuId.toString()">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{ item.meuName }}</span>
                </template>
                <el-menu-item-group>
                    <template v-for="child in item.children">
                        <el-menu-item :key="child.meuId" :index="child.meuId.toString()">{{ child.meuName }}</el-menu-item>
                    </template>
                </el-menu-item-group>
            </el-submenu>
            <el-menu-item v-else :key="item.meuId" :index="item.meuId.toString()">
                <i class="el-icon-menu"></i>
                <span>{{ item.meuName }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                menuData: [] // 用于存储菜单数据
            };
        },
        created() {
            this.fetchMenuData(); // 页面创建时请求菜单数据
        },
        methods: {
            fetchMenuData() {
                console.log("开始请求菜单数据");
                fetch('/getMeu') // 请求后端接口
                    .then(response => response.json())
                    .then(data => {
                        this.menuData = data; // 将返回的数据赋值给 menuData
                    })
                    .catch(error => {
                        console.error('请求菜单数据失败', error);
                    });
            },
            handleOpen(key, keyPath) {
                console.log('打开菜单:', key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log('关闭菜单:', key, keyPath);
            }


        }
    });
</script>
</body>
